<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>panel</title>
        <link type="text/css" rel="stylesheet" href="../../dist/cute.css"/>
        <style type="text/css">
            body {
                margin: 8px 0;
            }
            .row {
                margin-bottom: 28px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="grid12">
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-title">panel 标题</span>
                        &nbsp;其他文字
                    </div>
                    <div class="notify notify-nob">
                        Well done! You successfully read this important alert message.
                    </div>
                    <div class="panel-body">
                        panel  [pan·el || 'pænl]<br/>
                        n.  嵌板, 座谈小组, 仪表板<br/>
                        v.  嵌镶板
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="grid6">
                <div class="panel">
                    <div class="panel-head">panel 标题</div>
                    <div class="panel-body">
                        panel body
                    </div>
                    <div class="panel-foot">panel foot</div>
                </div>
            </div>
            <div class="grid3">
                <div class="panel panel-nob">
                    <div class="panel-head">panel nob 标题</div>
                    <div class="panel-body">panel style : panel-nob</div>
                </div>
            </div>
            <div class="grid3">
                <div class="panel panel-relax">
                    <div class="panel-head">panel relax 标题</div>
                    <div class="panel-body">panel style : panel-relax</div>
                    <div class="panel-foot">panel relax foot</div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="grid3">
                <div class="panel">
                    <div class="panel-head">panel follow 标题</div>
                    <div class="panel-body">
                        panel  [pan·el || 'pænl]<br/>
                        n.  嵌板, 座谈小组, 仪表板<br/>
                        v.  嵌镶板
                    </div>
                </div>
                <div class="panel panel-follow">
                    <div class="panel-head">panel follow 标题</div>
                    <div class="panel-body">
                        panel  [pan·el || 'pænl]<br/>
                        n.  嵌板, 座谈小组, 仪表板<br/>
                        v.  嵌镶板
                    </div>
                </div>
            </div>
            <div class="grid3">
                <div class="panel">
                    <div class="panel-head">panel table 标题</div>
                    <div class="panel-body">
                        panel  [pan·el || 'pænl]<br/>
                        n.  嵌板, 座谈小组, 仪表板<br/>
                        v.  嵌镶板
                    </div>
                    <table class="table table-condensed panel-table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="grid3">
                <div class="panel">
                    <div class="panel-head">panel table 标题</div>
                    <table class="table table-condensed panel-table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="grid3">
                <div class="panel">
                    <div class="panel-head">panel list 标题</div>
                    <div class="panel-body">
                        panel  [pan·el || 'pænl]<br/>
                        n.  嵌板, 座谈小组, 仪表板<br/>
                        v.  嵌镶板
                    </div>
                    <ul class="list panel-list">
                        <li class="list-item">
                            <span class="aside badge">1</span>
                            <i class="icon icon-apple"></i>&nbsp;Cras justo odio
                        </li>
                        <li class="list-item">
                            <span class="aside badge badge-success">2</span>
                            <i class="icon icon-android"></i>&nbsp;Dapibus ac facilisis in
                        </li>
                        <li class="list-item">
                            <div class="aside">
                                <span class="badge badge-info">3</span>
                            </div>
                            <i class="icon icon-phone"></i>&nbsp;Morbi leo risus
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    </body>
</html>

